<template>
  <div class="edit-form">
    <el-dialog
      title="编辑用户"
      :visible.sync="editDialogVisible"
      width="50%"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
        >
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item
          label="角色"
          prop="role"
        >
          <el-input v-model="editForm.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="editForm.permission_group_id">
            <el-option
              v-for="(item, index) in permissionList"
              :key="index"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="phone"
        >
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item
          label="介绍"
          prop="introduction"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="Please input"
            v-model="editForm.introduction"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogVisible=false">取 消</el-button>
        <el-button
          type="primary"
          @click="editUser"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail as editDetail, update as editUpdate } from '@/api/base/users.js'
export default {
  name: 'userEdit',
  props: {
    editForm: {
      type: Object,
      required: true
    },
    permissionList: {
      type: Array,
      required: true
    },
    thatId: {
      type: Number,
      required: true
    },
    editRow: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      editFormRules: {
        // 对用户名进行校验
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        // 对邮箱进行校验
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ]
      },
      editDialogVisible: false // 控制弹框
    }
  },
  created () {
    // this.getEdit()
  },
  methods: {
    // 弹框显示
    editDialogShow () {
      this.editDialogVisible = true
      this.getEdit()
    },
    // 弹框隐藏
    editDialogHide () {
      this.editDialogVisible = false
    },
    // 获取编辑项的数据
    async  getEdit (id) {
      const { data } = await editDetail({ id: this.thatId })
      console.log(data)
      this.editForm.username = data.username
      this.editForm.email = data.email
      this.editForm.role = data.role
      this.introduction = data.introduction
      this.editForm.permission_group_id = data.permission_group_id
      // this.$emit('edit', data.data)
    },
    // 完成编辑功能
    async editUser () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        await editUpdate({
          id: this.editRow.id,
          username: this.editRow.username,
          permission_group_id: this.editRow.permission_group_id,
          email: this.editRow.email,
          role: this.editRow.role
        })
      })
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-form {
  .demo-ruleForm {
    width: 400px;
    margin-left: 120px;
  }
}
</style>
